<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/static/css/mycss.css}">
    <script th:src="@{/static/js/jquery.min.js}"></script>
    <script th:src="@{/static/js/bootstrap.min.js}"></script>
    <script th:src="@{/static/js/myjs.js}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
    <script th:src="@{/static/js/bootstrap-datetimepicker.min.js}"></script>
    <script th:src="@{/static/js/bootstrap-datetimepicker.fr.js}"></script>
    <link rel="stylesheet" th:href="@{/static/css/bootstrap-datetimepicker.min.css}"/>
    <title>内存占用详情</title>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">LemonAPM(V0.9)</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="/apm/index">我的主机</a>
                        </li>
                        <li>
                            <a href="/apm/cpu">cpu监控</a>
                        </li>
                        <li  class="active">
                            <a href="/apm/memory">内存监控</a>
                        </li>
                        <li>
                            <a href="/apm/disk">磁盘监控</a>
                        </li>
                        <li>
                            <a href="#">主机报警(建设中)</a>
                        </li>
                        <li>
                            <a href="/apm/setting">设置</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="/apm/logout">登出</a>
                        </li>
                    </ul>
                </div>
            </nav>
            <div th:if="machineVoList != null" th:each="machine : ${machineVoList}">
                <button type="button" class="btn btn-info" data-toggle="collapse"
                        th:attr="data-target='#' + ${machine.uploadToken}"
                        th:text="${machine.uploadToken}+'主机内存占用 点击显示'">
                </button><br/> <br/>
                <div th:id="${machine.uploadToken}" class="collapse">
                    <div class="input-append date select-time" data-date="2017-01-07 12:10" data-date-format="yyyy-mm-dd hh:ii">
                        <input size="16" type="text" readonly>
                        <span class="add-on"><i data-date-icon="icon-calendar" class="icon-calendar"></i></span>
                        <button type="button" class="btn btn-default" onclick=" findMemoryData(this)" data-toggle="tooltip"  title="当前版本仅支持查询以选择时间为截止时间的最近半小时的数据">查询数据</button>
                    </div>
                    <canvas width="1000" height="400"></canvas>
                </div>
                <br/> <br/> <br/>
            </div>
            <div th:if="machineVoList == null">
                <h3>暂无数据，可以前往设置页面注册token</h3>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () { $("[data-toggle='tooltip']").tooltip(); });

    $('.select-time').each(
        function () {
            currentTime = new Date().Format("yyyy-MM-dd HH:mm");
            $(this).attr("data-date", "2020-12-19 15:49");
            $(this).children("input").attr("value", currentTime);
            $(this).datetimepicker();
        }
    );
</script>
</body>
</html>